<template>
  <div class="item">
    <div class="title">{{ $route.meta.title }}</div>
    <div class="content after">
      <div class="left">
        <img :src="list.icon ? list.icon : '/static/images/user.png'" alt class="logo" />
        <upload
          @fileInfo="editIcon"
          title="修改头像"
          html="<div style='width:100px;height:100px'></div>"
          class="img-upload"
        ></upload>
        <br />
        <el-button size="small" class="mt-10" style="width: 100px" @click="password.show = true">
          <i class="fa fa-pencil" style="margin-right: 10px"></i>修改密码
        </el-button>
      </div>
      <div class="right">
        <el-form label-width="80px" size="medium" :model="list">
          <el-form-item label="账号">{{ list.username }}</el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="list.phone"></el-input>
          </el-form-item>
          <el-form-item label="Q Q">
            <el-input v-model="list.qq"></el-input>
          </el-form-item>
          <el-form-item label="微信号">
            <el-input v-model="list.wechat"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="list.info"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submit()" type="primary" size="small">修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 修改密码 -->
    <el-dialog title="操 作" :visible.sync="password.show" width="30%" @closed="clearPassword">
      <el-form :model="password.form" :rules="password.rules" ref="password.form">
        <el-form-item label="原密码" label-width="100px" prop="old">
          <el-input v-model="password.form.old" autocomplete="off" size="small" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" label-width="100px" prop="new">
          <el-input v-model="password.form.new" autocomplete="off" size="small" show-password></el-input>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-button type="primary" @click="editPassword" size="small">提 交</el-button>
          <el-button @click="password.show = false" size="small">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import upload from "@/components/other/upload";
export default {
  components: {
    upload,
  },
  data() {
    return {
      list: this.$store.state.user,
      password: {
        show: false,
        form: {
          old: "",
          new: "",
        },
        rules: {
          old: [{ required: true, message: "请输入原密码", trigger: "blur" }],
          new: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        },
      },
    };
  },
  methods: {
    // 重置表单
    clearPassword() {
      this.password.form = {
        old: "",
        new: "",
      };
      this.$refs["password.form"].resetFields();
    },
    // 修改头像
    editIcon(info) {
      var data = {
        id: this.list.id,
        icon: info.file.path,
      };
      this.axios.post("/admin/Index/edit_user_icon", data).then((ref) => {
        let data = ref.data;
        if (data.state) {
          this.list.icon = info.file.path;
        } else {
          this.common.message({ type: "error", message: ref.info });
        }
      });
    },
    // 修改密码
    editPassword() {
      this.$refs["password.form"].validate((valid) => {
        if (valid) {
          var data = {
            id: this.list.id,
            old: this.password.form.old,
            new: this.password.form.new,
          };
          this.axios.post("/admin/Index/edit_user_password", data).then((ref) => {
            var ref = ref.data;
            if (ref.state) {
              this.password.show = false;
              this.common.message({ message: ref.info });
            } else {
              this.common.message({ type: "error", message: ref.info });
            }
          });
        }
      });
    },
    // 修改资料
    submit() {
      let data = { ...this.list };
      data["T"] = "user";
      this.axios.post("/admin/Index/handle", data).then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          this.common.message({ message: ref.info });
        } else {
          this.common.message({ type: "error", message: ref.info });
        }
      });
    },
  },
};
</script>>
<style scoped>
.left {
  position: relative;
  font-size: 0;
}
.left .logo {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}
.right {
  width: 400px;
  float: left;
}
.img-upload {
  position: absolute;
  top: 0px;
  left: 0;
  margin-left: 0 !important;
  font-size: 0;
}
</style>

